<script>
/**
 * 可滑动的表格
 */
import BScroll from '@better-scroll/core'

export default {
  props: {
    titleList: { // 标题集合
      type: Array,
      default: () => {
        return [];
      },
    },
    dataList: { // 表格数据
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {}
  },
  computed: {
    scrollStyle() {
      // 没有设置宽度
      const noSetWidth = this.titleList.every(cur => {
        return !cur.width
      })
      if (noSetWidth) {
        return {
          width: '100%'
        }
      }
    },
    widthStyle() {
      if (this.titleList) {
        let isPercent = this.titleList.some(cur => {
          return typeof cur.width === 'string' && cur.width.includes('%');
        })
        if (isPercent) {
          return {
            // width: '375px'
            width: '100%'
          }
        }
        const totalCount = this.titleList.reduce((prev, cur, index) => {
          return prev + Number(cur.width);
        }, 0)
        return {
          width: totalCount ? `${totalCount}px` : '100%'
        }
      }
    }
  },
  mounted() {
    this.init()
  },
  beforeDestroy() {
    this.bs.destroy()
  },
  methods: {
    init() {
      this.bs = new BScroll(this.$refs.scroll, {
        bounce: true,
        eventPassthrough: 'vertical', // 横向模拟横向滚动，而纵向的滚动还是保留原生滚动
        scrollX: true,
        probeType: 3 // listening scroll event
      })
      this.bs.on('scrollStart', () => {
        // console.log('scrollStart-')
      })
      this.bs.on('scroll', ({y}) => {
        // console.log('scrolling-')
      })
      this.bs.on('scrollEnd', () => {
        // console.log('scrollingEnd')
      })
    }
  }
}
</script>
<template>
  <div class="horizontal-container">
    <div class="scroll-wrapper" ref="scroll">
      <div class="scroll-content" :style="scrollStyle">
        <div class="el-table el-table--border">
          <div class="el-table__wrapper">
            <table cellspacing="0"
                   cellpadding="0"
                   border="0"
                   class="el-table__header" :style="widthStyle"
            >
              <colgroup>
                <col v-for="(item,index) in titleList" :name="index" :width="item.width">
              </colgroup>
              <thead>
              <tr>
                <th v-for="item in titleList" class="el-table__cell">
                  <div class="cell cell_head">{{ item.title }}</div>
                </th>
              </tr>
              </thead>
              <tbody>
              <tr class="el-table__row" v-for="(set, key) in dataList">
                <td class="el-table__cell" v-for="(item, i) in titleList">
                  <div class="cell">{{ set[item.type] }}</div>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>

.el-table__header,
.el-table__body {
  //width:480px;
}

.el-table {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  flex: 1;
  width: 100%;
  max-width: 100%;
  background-color: #fff;
  font-size: 14px;
  color: #606266;

  &.el-table--border {
    .el-table__cell {
      border-right: 1px solid #fff;
    }
  }

  .el-table__wrapper {
    //width: 100%;
    overflow: hidden;
  }

  th.el-table__cell {
    overflow: hidden;
    user-select: none;
    background: #F1F1F2;
    border-bottom: 1px solid #fff;
  }

  td.el-table__cell {
    background: #F8F8F9;
    border-bottom: 1px solid #fff;
  }

  .cell {
    display: flex;
    text-align: left;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;

    padding: 4px 8px;
    color: #888888;
    font-family: PingFangSC-Medium;
    font-weight: normal;
    font-size: 12px;
    line-height: 16px;
    background: #F8F8F9;
  }

  .cell_head {
    color: rgba(36, 37, 38, 1);
    font-weight: bold;
    background: #F1F1F2;
  }
}


.horizontal-container {
  .scroll-wrapper {
    position: relative;
    //margin:20px 16px;
    white-space: nowrap;
    overflow: hidden;

    .scroll-content {
      display: inline-block;
      //width: 100%;
    }
  }
}

</style>